<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item{
            height: 260px;
            margin-top: 20px;
        }
        img{
            width: 180px;
            height: 260px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div class="item">
            <img src="" alt="">
            <span></span>
        </div> -->
    </div>
    <div class="bottom">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <script>
        var offset = 0
        var url = `http://localhost:8000/top/playlist?offset=${offset}&limit=5`
        $.ajax({
            url,
            success:res=>{
                console.log(res);
                var data = res.data
                var arr = []
                data.forEach(item=>{
                    var {pic,title} = item
                    arr.push({pic,title})
                })
                arr.forEach(item=>{
                    var {pic,title} = item
                    var template = `
                    <div class="item">
                        <img src="${pic}">
                        <span>${title}</span>
                    </div>
                    `
                    $('#app').append(template)
                })
            }
        })
        
        $('button').click(function(){
            $('#app').html("")
            var num = $(this).html()
            offset = num*5-5
            var url = `http://localhost:8000/top/playlist?offset=${offset}&limit=5`
            $.ajax({
                url,
                success:res=>{
                    console.log(res);
                    var data = res.data
                    var arr = []
                    data.forEach(item=>{
                        var {pic,title} = item
                        arr.push({pic,title})
                    })
                    arr.forEach(item=>{
                        var {pic,title} = item
                        var template = `
                        <div class="item">
                            <img src="${pic}">
                            <span>${title}</span>
                        </div>
                        `
                        $('#app').append(template)
                    })
                }
            })
        })
    </script>
</body>
</html>